<template>
	<div class="my">
		<div v-for="(item, index) in baseInfo.Configs" :key="index">
			<div v-if="item.Type">
				<van-field name="area" v-if="item.Type == 'Text' || item.Type == 'Number'" v-model="item.Value"
					:label="item.Display" :required="item.MustInput">
					<template #extra>
						{{ item.Unit }}
					</template>
				</van-field>
			
				<van-field class="input_text" v-if="item.Type == 'Choose' && item.Display == '行业'" v-model="trade"
					:label="item.Display" readonly autosize type="textarea" />
				<van-field class="input_text" v-if="item.Type == 'Choose' && item.Display != '行业'" v-model="trade"
					:label="item.Display" readonly autosize type="textarea" :required="item.MustInput" />
				<!-- 地区 -->
				<van-field required class="input_text" v-if="item.Type == 'City'" v-model="item.Value"
					:label="item.Display" readonly autosize type="textarea" right-icon="arrow"
					:required="item.MustInput" />
				<!-- 详细地址 -->
				<div class="problem" v-if="item.Type == 'Map'">
					<div>
						<van-field class="input_text" :label="item.Display" input-align="right" :required="item.MustInput">
							<template #input>
								<!-- <div style="color: #1296db" >从地图选择</div> -->
								<router-link to="/BaseInfo/Map" style="color: #1296db"  > 从地图选择</router-link>
							</template>
						</van-field>
					</div>
					<van-field v-model="item.Value" rows="3" autosize type="textarea" placeholder="请输入反馈内容" />
				</div>
				<van-field  v-if="item.Type == 'TextArea' " :label="item.Display" v-model="item.Value" rows="3" autosize type="textarea" placeholder="请输入" :required="item.MustInput" />
				<!-- 图片 多张-->
				<van-field v-if="item.Type == 'MultiImage'" class="input_text" name="uploader" :label="item.Display" :required="item.MustInput">
					<template #input>
						<van-uploader deletable :after-read="afterRead" v-model="uploader[item.FieldName]" max-count="6"
							:name="item.FieldName" />
					</template>
				</van-field>
				<!-- 图片 -->
				<van-field v-if="item.Type == 'SingleImage'" class="input_text" name="uploader" :label="item.Display" :required="item.MustInput">
					<template #input>
						<van-uploader deletable :after-read="afterRead" v-model="uploader[item.FieldName]" max-count="1"
							:name="item.FieldName" />
					</template>
				</van-field>
				<!-- 单选框 -->
				<van-field class="input_text" name="radio" :label="item.Display" v-if="item.Type == 'Radio'"
					:required="item.MustInput">
					<template #input>
						<van-radio-group v-model="item.Value" direction="horizontal">
							<van-radio v-for="(item1, index1) in item.ParamList" :key="index1" :name="item1.ID"
								style="margin: 0 10px 10px 0">{{ item1.Name }}</van-radio>
						</van-radio-group>
					</template>
				</van-field>
				<!-- 多选框 -->
				<van-field class="input_text" name="checkbox" :label="item.Display" v-if="item.Type == 'Checkbox'"
					:required="item.MustInput">
					<template #input>
						<van-checkbox-group v-model="item.Value" direction="horizontal" shape="square">
							<van-checkbox shape="square" v-for="(item1, index1) in item.ParamList" :key="index1"
								:name="item1.ID" style="margin: 0 10px 10px 0">{{ item1.Name }}
							</van-checkbox>
						</van-checkbox-group>
					</template>
				</van-field>
			</div>
		</div>

		<div class="btn_submit">
			<van-button class="br-5" block type="info" @click="save">
				保存
			</van-button>
		</div>
	</div>
</template>

<script>
import { GetQueryupText, updateModifyPostNew } from '@/api/base'
import { uploadAttach } from "@/api/common";
import { Toast } from 'vant';
import { mapGetters } from 'vuex'
export default {
	components: {},
	data() {
		return {
			loading: false,
			mobile: '',
			message: '',
			value: '',
			uploader: {},
			showCalendar: false,
			value1: '',
			showArea: false,
			areaList: {}, // 数据格式见 Area 组件文档
			radio: '1',
			baseInfo: JSON.parse(localStorage.getItem('CompanyEditInfo')),
			trade: '',
			CompanyCode: '',
			Map:{}
		}
	},
	computed: {
		...mapGetters(['baseUrl']),
	},
	created() {
		let _mapInfo=localStorage.getItem('MapLatLng')
		if(_mapInfo){
			this.Map=JSON.parse(_mapInfo)
		}
		this.baseInfo.Configs.forEach((item1) => {
			if (item1.FieldName == 'ApplyProfession') {
				this.GetQueryupText(item1.Value)
			}else if(item1.FieldName=='Address'&&_mapInfo){
				item1.Value=this.Map.address
			}else if(item1.FieldName =='Lng'&&_mapInfo){
				item1.Value=this.Map.addLon
			}else if(item1.FieldName =='Lat'&&_mapInfo){
				item1.Value=this.Map.addLat
			}
			if (item1.Type == "SingleImage") {
				if (item1.Value!=null&&item1.Value != '') {
					this.$set(this.uploader, item1.FieldName, [{ url: this.baseUrl + item1.Value, AttFilePath: item1.Value }])
				}
			}
			if (item1.Type == "MultiImage") {
				
				if (item1.Value!=null&&item1.Value != '') {
					let Images=item1.Value.split(';')
					let array=[]
					for(let index = 0; index < Images.length; index++) {
						let element = Images[index];
						array.push({ url: this.baseUrl + element, AttFilePath: element })
						// this.$set(this.uploader, item1.FieldName, [{ url: this.baseUrl + item1.Value, AttFilePath: item1.Value }])	
						
					}
					this.$set(this.uploader, item1.FieldName, array)	
				}
			}
			if (item1.Type == "Checkbox") {
				//关键风险点返回的 是数据 
				if(!item1.Value){
					item1.Value = []
				
				}else{
						//关键风险点不转 数组
					if(item1.FieldName!='RiskPointEng'){
						item1.Value=item1.Value.split(',')
					}
				}
			}
		})
		this.CompanyCode = this.baseInfo.CompanyCode
	},
	methods: {
		// 行业信息
		GetQueryupText(value) {
			this.loading = true
			GetQueryupText({ value })
				.then((res) => {
					this.loading = false

					this.trade = res.data
					console.log(this.trade, 'this.trade')
				})
				.catch((err) => {
					console.log('err', err)
				})
		},

		afterRead(file, name) {
			console.log(file)
			console.log(name)
			let params = new FormData(); //创建form对象
			params.append("file", file.file);
			uploadAttach(params)
				.then((res) => {
					// this.uploader[name.name]=res.data.AttFilePath
					this.uploader[name.name][name.index].AttFilePath = res.data.AttFilePath
					console.log(this.uploader)
				})
				.catch((err) => {
					console.log("err", err);
				});
		},
		save() {
			this.loading = true
			let param = {}
			param.CompanyCode = this.CompanyCode
			// 	try{
			// 	this.baseInfo.Configs.forEach((item) => {

			// 		if (item.MustInput) {
			// 			console.log(item.Display + "		" + item.Value)
			// 			if (item.Value == null || item.Value == '') {
			// 				console.log(item.Display)
			// 				console.log(item.Value)

			// 				throw new Error(item.Display)

			// 			}
			// 		}
			// 		if (item.Type == "SingleImage") {

			// 			item.Value = this.uploader[item.FieldName].map(element => element.AttFilePath).join(';')
			// 			console.log(item.FieldName + "			" + item.Value)
			// 		}
			// 		param[item.FieldName] = item.Value

			// 		if (item.ShowRelatedFieldKey) {
			// 			param[item.RelatedFieldName] = item.RelatedFieldValue
			// 		}
			// 	})

			// }catch(e){
			// 	Toast('请填写:' + e.message)
			// 	throw e;
			// }
			for (let index = 0; index < this.baseInfo.Configs.length; index++) {

				const item = this.baseInfo.Configs[index];
				if (item.Type == "SingleImage") {
					if(this.uploader[item.FieldName]){
						item.Value = this.uploader[item.FieldName].map(element => element.AttFilePath).join(';')
					}
				}
				if (item.Type == "MultiImage") {
					if(this.uploader[item.FieldName]){
						item.Value = this.uploader[item.FieldName].map(element => element.AttFilePath).join(';')
					}
				}
				if (item.MustInput) {
					if (item.Value == null || item.Value == '') {
						Toast('请填写:' + item.Display)
						return
						
					}
				}
		
				if(item.Type=='Checkbox'){
					// if(item.Value&&item.Value.)
					param[item.FieldName] = item.Value.join(',')
				}else{
					param[item.FieldName] = item.Value
				}
				

				if (item.ShowRelatedFieldKey) {
					param[item.RelatedFieldName] = item.RelatedFieldValue
				}
			}
			updateModifyPostNew(param)
				.then((res) => {
					this.loading = false
					localStorage.setItem('CompanyEditInfo','')
					this.$router.go(-1)
				})
				.catch((err) => {
					console.log('err', err)
				})
		},
	},
}
</script>

<style lang="less">
.my {
	height: 100vh;
	background-color: #e8f1f8;
}

.problem {
	background-color: #ffffff;

	.address_detail {
		padding: 10px 16px;
		display: flex;
		justify-content: space-between;
	}
}

.imgs {
	position: relative;
	width: 78px;
	height: 78px;
}
</style>
